<template>  
    <div ref="chart" :style="{width: '100%', height: '500px'}"></div>  
  </template>  
    
  <script>  
  import * as echarts from 'echarts';
    
  export default {  
    name: 'HorizontalBarChart',  
    props: {  
      options: {  
        type: Object,  
        required: true  
      }  
    },  
    mounted() {  
      this.renderChart();  
    },  
    watch: {  
      options: {  
        handler() {  
          this.renderChart();  
        },  
        deep: true  
      }  
    },  
    methods: {  
      renderChart() {  
        const chartDom = this.$refs.chart;  
        // 基于准备好的dom，初始化echarts实例  
        const myChart = echarts.init(chartDom);  
        // 使用刚指定的配置项和数据显示图表  
        myChart.setOption(this.options);  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  </style>